<template>
  <div class="home">
    <x-header :left-options="{showBack: false}">
      <button-tab class="header-tab">
        <button-tab-item selected @on-item-click="getOrderList('0')">全部</button-tab-item>
        <button-tab-item @on-item-click="getOrderList('1')">拼箱</button-tab-item>
        <button-tab-item @on-item-click="getOrderList('2')">散货</button-tab-item>
      </button-tab>
    </x-header>
    <my-tabbar></my-tabbar>
    <search
      v-model="$store.state.order.searchStr"
      :auto-fixed="false"
      position="absolute"
      top="0px"
      @on-cancel="viewModel=0"
      @on-focus="viewModel=1"
      @on-submit="search">
      <div @click="search" class="search-text" slot="right">搜索</div>
    </search>
    <div v-show="viewModel===0" v-infinite-scroll="getMoreOrderList" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
      <!-- <order-card
        v-for="(item, index) in orderList"
        :key="index"
        :order-id="item.MessageId">
        <div slot="title">{{item.Brief}}</div>
        <div slot="footer">
          <span>{{item.State|orderStatus}}</span>
          <span>{{item.DateUpdated|hhmm}}</span>
        </div>
      </order-card> -->
      <x-table
        :full-bordered="false"
        :content-bordered="false"
        :cell-bordered="false"
        class="mytable"
        style="background-color:#fff;">
        <thead>
          <tr v-for='(item,index) in orderList' :style="{'background-color': color(index)}" @click="getorderlist(item.MessageId)" :key="index">
            <div class="box">
              <div class="title">{{item.Brief}}</div>
              <div class="footer">
                <div>
                  <span>{{item.State|orderStatus}}</span>
                  <span>{{item.DateUpdated|hhmm}}</span>
                </div>
              </div>
            </div>
          </tr>
        </thead>
      </x-table>
    </div>
    <div v-if="viewModel===1" class="history-tags-wrap">
      <div class="history-title">历史搜索</div>
      <span class="history-tag"
            v-for="(item, index) in historyTags"
            :key="index"
            @click="selectTag(item)">
        {{item}}
      </span>
    </div>
    <div v-show="viewModel===2" v-infinite-scroll="getMoreSearchOrderList" infinite-scroll-disabled="searchLoading" infinite-scroll-distance="10">
      <!-- <box gap="10px">
        <order-card
          v-for="(item, index) in searchList"
          :key="index"
          :order-id="item.MessageId">
          <div slot="title">{{item.Brief}}</div>
          <div slot="footer">
            <span>{{item.State|orderStatus}}</span>
            <span>{{item.DateUpdated|hhmm}}</span>
          </div>
        </order-card>
      </box> -->
      <x-table
        :full-bordered="false"
        :content-bordered="false"
        :cell-bordered="false"
        class="mytable"
        style="background-color:#fff;">
        <thead>
          <tr v-for='(item,index) in searchList' :style="{'background-color': color(index)}" @click="getorderlist(item.MessageId)" :key="index">
            <div class="box">
              <div class="title">{{item.Brief}}</div>
              <div class="footer">
                <div>
                  <span>{{item.State|orderStatus}}</span>
                  <span>{{item.DateUpdated|hhmm}}</span>
                </div>
              </div>
            </div>
          </tr>
        </thead>
      </x-table>
    </div>
    <div v-if="UserType === '4'">
      <building></building>
    </div>
    <!-- <my-audio></my-audio> -->
    <my-load-more v-if="viewModel!==1"></my-load-more>
  </div>
</template>

<script>
import {
  XHeader,
  ButtonTab,
  ButtonTabItem,
  Card,
  Search,
  LoadMore,
  Tab,
  TabItem,
  XTable,
  Grid,
  GridItem,
  Box
} from 'vux'
import MyTabbar from '../../components/MyTabbar.vue'
import OrderCard from '../../components/OrderCard.vue'
import Building from '../../components/Building.vue'
import MyLoadMore from '../../components/MyLoadMore.vue'
// import MyAudio from '../../components/MyAudio.vue'
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  name: 'home',
  components: {
    XHeader,
    ButtonTab,
    ButtonTabItem,
    Tab,
    TabItem,
    Card,
    OrderCard,
    Search,
    LoadMore,
    Grid,
    XTable,
    // MyAudio,
    GridItem,
    MyTabbar,
    Building,
    Box,
    MyLoadMore
  },
  data () {
    return {
      viewModel: 0,
      searchLoading: false,
      loading: false
    }
  },
  computed: {
    ...mapState({
      orderList: state => state.order.orderList,
      historyTags: state => state.order.historyTags,
      orderType: state => state.order.orderType,
      searchStr: state => state.order.searchStr,
      falog: state => state.order.falog,
      UserType: state => state.user.UserType,
      searchList: state => state.order.searchList
    })
  },
  mounted () {
    this.getOrderList('0')
  },
  watch: {
    UserType (value) {
      if (value !== '4') {
        this.getOrderList('0')
      }
    },
    falog (value) {
      this.addHistoryKeys(this.searchStr)
    },
    orderType (value) {
      if (this.viewModel === 2) {
        this.search()
      }
    }
  },
  destroyed () {
    this.resetSearch()
  },
  methods: {
    selectTag (tagValue) {
      this.viewModel = 2
      this.$store.state.order.searchStr = tagValue
      this.getSearchOrderList()
    },
    search () {
      this.viewModel = 2
      this.getSearchOrderList()
    },
    getorderlist (msgid) {
      this.$router.push({
        path: '/main/orderInfo',
        query: {
          orderId: msgid
        }
      })
    },
    color (index) {
      if (index % 2 === 0) {
        return '#adeaea'
      }
    },
    ...mapMutations({
      resetSearch: 'order/resetSearch'
    }),
    ...mapActions({
      getOrderList: 'order/getOrderList',
      getMoreOrderList: 'order/getMoreOrderList',
      getSearchOrderList: 'order/getSearchOrderList',
      addHistoryKeys: 'order/addHistoryKeys',
      getMoreSearchOrderList: 'order/getMoreSearchOrderList'
    })
  }
}
</script>

<style lang="less">
.home{
  padding-bottom: 53px;
  .header-tab{
    margin-top: 5px;
  }
  .search-text{
    color: #09BB07;
    margin-left: 10px;
  }
  .mytable tr {
    padding: 10px;
    .box {
      margin: 10px;
      .title{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-height: 1.6;
        overflow: hidden;
      }
      .footer > *{
        display: flex;
        justify-content: space-between;
        font-size: 13px;
        line-height: 1.6;
        color: grey;
      }
    }
  }
  .history-tags-wrap{
    padding: 10px;
    .history-title{
      color: grey;
      font-size: 14px;
    }
    .history-tag{
      font-size: 14px;
      margin: 10px 5px 0 5px;
      display: inline-block;
      padding: 2px 8px;
      background: #09BB07;
      color: #ffffff;
      border-radius: 5px;
    }
  }
}
</style>
